<template>
	<view class="msg-page">
		<view v-for="(message,index) in messageList" :key="index"
			:style="{'color': message.status ===0 ? 'red': 'gray'}" class="msg-box" @click="viewMsg(message)">
			<view class="text-box">
				<h2>{{message.type}}</h2>
				<text>{{message.title}}</text>
			</view>
			<view class="text-time">
				<text>{{message.createTime}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		myMessage
	} from '../../../api/supervise/index.js'
	export default {
		data() {
			return {
				pageIndex: 1,
				messageList: []
			}
		},
		onLoad() {
			this.getMessageList();
		},
		onPullDownRefresh() {
			this.pageIndex++;
			this.getMessageList();
		},
		methods: {
			viewMsg(message) {
				this.$tab.navigateTo("/pages/index/message/message-content?message=" + encodeURIComponent(JSON.stringify(
					message)));
			},
			getMessageList() {
				myMessage(this.pageIndex).then(res => {
					const data = res.status === 0 ? res.list : [];
					uni.stopPullDownRefresh();
					this.messageList = this.messageList.concat(data);
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.msg-page {
		width: 100vw;

		.msg-box {
			display: flex;
			align-items: center;
			height: 10vh;
			padding: 20px;
			background-color: #F2F2F0;
			border-top: solid 1px #5e5e5e;

			.text-box {
				width: 65%;
			}

			.text-time {
				text-align: right;
				width: 35%;
			}
		}
	}

	.is-read {
		color: gray;
	}

	.not-read {
		color: red;
	}
</style>